import styled from 'styled-components'

// 头部样式
export const HeaderBox = styled.div`
  line-height: .4rem;
  background: #FF6C0C;
  font-size: .18rem;
  text-align: center;
  color:#fff;
`

// 搜索
export const SearchBox = styled.div`
  width: 90vw;
  height: .46rem;
  display: flex;
  border: 1px solid #ff6c0c;
  margin: .15rem auto;
  border-radius: 5px;
  box-shadow: 1px 1px 5px #ccc;
  justify-content: center;
  align-items: center;
  img{
    width: .2rem;
    height: .2rem;
  }
  span{
    color:#555;
    margin-left: .1rem;
  }
`

export const HotcateBox = styled.div`
  background: #fff;
  .title{
    padding: .15rem;
    color:#949494;
  }
`

export const GoodfoodBox = styled.div`
padding-left: .1rem;
> h1 {
height: .5rem;
line-height: .6rem;
padding-left: .15rem;
color: #666;
padding-left: 0;
}
> div {
display: flex;
flex-wrap: wrap;
> dl {
width: calc(50% - 0.1rem);
background: #fff;
margin-right: .1rem;
margin-bottom: .1rem;
dt {
img {
width: 100%;
}
}
dd {
display: flex; 
flex-direction: column;
align-items: center;
padding: .1rem;
h3 {
font-size: .16rem;
}
p {
font-size: .12rem;
color: #666;
}
}
}

`